<template>
  <div>
    <div id="main" ref="main" style="width: 800px;height: 500px;">数据报表</div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import * as echarts from 'echarts'

const {
  mapActions,
  mapState
} = createNamespacedHelpers('reports')

export default {
  name: 'index',
  data () {
    return {
      // 初始化的图表
      main: null,
      // 初始化的数据
      option: {}
    }
  },
  methods: {
    ...mapActions(['getReportsObj']),
    setEcharts () {
      console.log(this.$refs.main)
      this.main = echarts.init(this.$refs.main)
    }
  },
  computed: {
    ...mapState(['reports'])
  },
  created () {
    this.getReportsObj()
  },
  mounted () {
    this.setEcharts()
  },
  watch: {
    reports (value) {
      console.log(value)
      this.option = {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: value.legend,
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: value.xAxis[0].data
          }
        ],
        yAxis: [
          {
            type: value.yAxis[0].type,
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            }
          }
        ],
        series: value.series
      }
      this.main.setOption(this.option)
    }
  }
}
</script>

<style scoped>

</style>
